<template>
  <div class="device-count bg-c-base flex">
    <div class="l-wrapper">
      <v-chart :options="options" ref="chart"></v-chart>
    </div>
    <div class="flex flex-column r-wrapper justify-between flex-1">
      <div class="flex">
        <div>
          <div>登录设备</div>
          <span class="sub-title">Distribution of Internet devices</span>
        </div>
        <div>
          <count-to-hy
            class="font-weight ml-4 font-count-to"
            :end-val="deviceCount.count"
            suffix=""
            :decimals="0"
          />
          <span class="unit">台</span>
        </div>
      </div>
      <div class="flex justify-around">
        <div
          class="flex flex-column align-center"
          v-for="(item, i) in deviceCount.list"
          :key="i"
        >
          <count-to-hy
            class="font-3 font-weight"
            :end-val="item.value"
            suffix=""
            :decimals="0"
          />
          <div class="flex align-center">
            <i class="dot"></i>
            <span class="ml-1 font-2">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, watch, getCurrentInstance, onMounted } from 'vue';
import mock from '@/hooks/mock';
export default {
	setup () {
		let { deviceCount } = reactive(mock());
		onMounted(() => {
			let dom = getCurrentInstance().ctx.$refs['chart'];
			watch(
				() => deviceCount.list,
				() => {
					options.series[0].data = deviceCount.list;
					dom.init();
				}
			);
		});

		let options = reactive({
			grid : {
				left : 0,
				right : 0,
				top : 0,
				bottom : 0,
			},
			tooltip : {
				trigger : 'item',
				backgroundColor : 'rgb(000,000,000,.5)',
				axisPointer : {
					type : 'shadow',
				},
				textStyle : {
					color : '#fff',
					fontSize : 28,
				},
				padding : 10,
				formatter : function (params) {
					const str =
            params.seriesName +
            '<br />' +
            params.marker +
            params.data.name +
            '<br />' +
            '数量：' +
            params.data.value +
            '<br />';
					return str;
				},
			},
			series : [
				{
					name : '设备数量',
					type : 'pie',
					radius : '80%',
					selectedMode : 'multiple', // 点击分开
					selectedOffset : 10, // 分开的间隙
					clockwise : true,
					center : ['50%', '50%'],
					emphasis : {
						itemStyle : {
							color : 'rgb(140,251,182)',
						},
					},
					color : ['rgb(176,207,120)', 'rgb(157,195,91)', 'rgb(131,167,72)'],
					data : deviceCount.list,
					label : {
						show : false,
					},
					labelLine : {
						show : false,
					},
					roseType : 'radius',
				},
			],
		});

		return {
			deviceCount,
			options,
		};
	},
};
</script>

<style lang="scss" scoped>
.device-count {
  height: 280px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.l-wrapper {
  width: 258px;
}
.r-wrapper {
  padding: 40px 10px 40px 0;
  box-sizing: border-box;
}
.dot {
  background: #c5fb79;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>
